Betinget Typeinferens: Mestre 'infer'-nøkkelordet i TypeScript

TypeScripts typesystem tilbyr kraftige verktøy for å skape robust og vedlikeholdbar kode. Blant disse verktøyene skiller betingede typer seg ut som en allsidig mekanisme for å uttrykke komplekse typerelasjoner. Nøkkelordet infer, spesielt, åpner for avanserte muligheter innenfor betingede typer, og tillater sofistikert typeekstraksjon og -manipulering. Denne omfattende guiden vil utforske vanskelighetene med infer, og gi praktiske eksempler og innsikt for å hjelpe deg med å mestre bruken av det.

Forstå betingede typer

Før du dykker ned i infer, er det avgjørende å forstå det grunnleggende om betingede typer. Betingede typer lar deg definere typer som er avhengige av en betingelse, lik en ternær operator i JavaScript. Syntaksen følger dette mønsteret:

            T extends U ? X : Y
            

              
                Copy
              
            
          

Her, hvis typen T kan tilordnes typen U, er den resulterende typen X; ellers er det Y.

Eksempel:

            type IsString<T> = T extends string ? true : false;

type StringCheck = IsString<string>; // type StringCheck = true
type NumberCheck = IsString<number>; // type NumberCheck = false
            

              
                Copy
              
            
          

Dette enkle eksemplet demonstrerer hvordan betingede typer kan brukes til å avgjøre om en type er en streng eller ikke. Dette konseptet strekker seg til mer komplekse scenarier, og baner vei for infer-nøkkelordet.

Introduserer 'infer'-nøkkelordet

Nøkkelordet infer brukes i true-grenen av en betinget type for å introdusere en typevariabel som kan utledes fra typen som sjekkes. Dette lar deg trekke ut spesifikke deler av en type og bruke dem i den resulterende typen.

Syntaks:

            T extends (infer R) ? X : Y
            

              
                Copy
              
            
          

I denne syntaksen er R en typevariabel som vil bli utledet fra strukturen til T. Hvis T samsvarer med mønsteret, vil R inneholde den utledede typen, og den resulterende typen vil være X; ellers vil den være Y.

Grunnleggende eksempler på 'infer'-bruk

1. Utlede returtype for en funksjon

Et vanlig bruksområde er å utlede returtypen til en funksjon. Dette kan oppnås med følgende betingede type:

            type ReturnType<T extends (...args: any) => any> = T extends (...args: any) => infer R ? R : any;
            

              
                Copy
              
            
          

Forklaring:

• T extends (...args: any) => any: Denne begrensningen sikrer at T er en funksjon.
• (...args: any) => infer R: Dette mønsteret samsvarer med en funksjon og utleder returtypen som R.
• R : any: Hvis T ikke er en funksjon, er den resulterende typen any.

Eksempel:

            function greet(name: string): string {
  return `Hello, ${name}!`;
}

type GreetingReturnType = ReturnType<typeof greet>; // type GreetingReturnType = string

function calculate(a: number, b: number): number {
  return a + b;
}

type CalculateReturnType = ReturnType<typeof calculate>; // type CalculateReturnType = number

            

              
                Copy
              
            
          

Dette eksemplet demonstrerer hvordan ReturnType vellykket trekker ut returtypene til funksjonene greet og calculate.

2. Utlede matriseelementtype

Et annet hyppig bruksområde er å trekke ut elementtypen til en matrise:

            type ElementType<T> = T extends (infer U)[] ? U : never;
            

              
                Copy
              
            
          

Forklaring:

• T extends (infer U)[]: Dette mønsteret samsvarer med en matrise og utleder elementtypen som U.
• U : never: Hvis T ikke er en matrise, er den resulterende typen never.

Eksempel:

            type StringArrayElement = ElementType<string[]>; // type StringArrayElement = string
type NumberArrayElement = ElementType<number[]>; // type NumberArrayElement = number
type MixedArrayElement = ElementType<(string | number)[]>; // type MixedArrayElement = string | number

type NotAnArray = ElementType<number>; // type NotAnArray = never
            

              
                Copy
              
            
          

Dette viser hvordan ElementType korrekt utleder elementtypen for forskjellige matrisetyper.

Avansert 'infer'-bruk

1. Utlede parametere for en funksjon

I likhet med å utlede returtypen, kan du utlede parametrene til en funksjon ved hjelp av infer og tupler:

            type Parameters<T extends (...args: any) => any> = T extends (...args: infer P) => any ? P : never;
            

              
                Copy
              
            
          

Forklaring:

• T extends (...args: any) => any: Denne begrensningen sikrer at T er en funksjon.
• (...args: infer P) => any: Dette mønsteret samsvarer med en funksjon og utleder parametertypene som en tuple P.
• P : never: Hvis T ikke er en funksjon, er den resulterende typen never.

Eksempel:

            function logMessage(message: string, level: 'info' | 'warn' | 'error'): void {
  console.log(`[${level.toUpperCase()}] ${message}`);
}

type LogMessageParams = Parameters<typeof logMessage>; // type LogMessageParams = [message: string, level: "info" | "warn" | "error"]

function processData(data: any[], callback: (item: any) => void): void {
  data.forEach(callback);
}

type ProcessDataParams = Parameters<typeof processData>; // type ProcessDataParams = [data: any[], callback: (item: any) => void]
            

              
                Copy
              
            
          

Parameters trekker ut parametertypene som en tuple, og bevarer rekkefølgen og typene til funksjonens argumenter.

2. Ekstrahere egenskaper fra en objekttype

infer kan også brukes til å trekke ut spesifikke egenskaper fra en objekttype. Dette krever en mer kompleks betinget type, men det muliggjør kraftig typemanipulering.

            type PickByType<T, U> = {
  [K in keyof T as T[K] extends U ? K : never]: T[K];
};
            

              
                Copy
              
            
          

Forklaring:

• K in keyof T: Dette itererer over alle nøkler av typen T.
• T[K] extends U ? K : never: Denne betingede typen sjekker om typen til egenskapen ved nøkkel K (dvs. T[K]) kan tilordnes typen U. Hvis det er tilfelle, inkluderes nøkkelen K i den resulterende typen; ellers er den ekskludert ved hjelp av never.
• Hele konstruksjonen lager en ny objekttype med bare egenskapene hvis typer strekker seg til U.

Eksempel:

            interface Person {
  name: string;
  age: number;
  city: string;
  country: string;
}


type StringProperties = PickByType<Person, string>; // type StringProperties = { name: string; city: string; country: string; }

type NumberProperties = PickByType<Person, number>; // type NumberProperties = { age: number; }

            

              
                Copy
              
            
          

PickByType lar deg lage en ny type som bare inneholder egenskapene av en spesifikk type fra en eksisterende type.

3. Utlede nestede typer

infer kan kjedes og nestes for å trekke ut typer fra dypt nestede strukturer. Vurder for eksempel å trekke ut typen til det innerste elementet i en nestet matrise.

            type DeepArrayElement<T> = T extends (infer U)[] ? DeepArrayElement<U> : T;
            

              
                Copy
              
            
          

Forklaring:

• T extends (infer U)[]: Dette sjekker om T er en matrise og utleder elementtypen som U.
• DeepArrayElement<U>: Hvis T er en matrise, kaller typen rekursivt DeepArrayElement med elementtypen U.
• T: Hvis T ikke er en matrise, returnerer typen T selv.

Eksempel:

            type NestedStringArray = string[][][];
type DeepString = DeepArrayElement<NestedStringArray>; // type DeepString = string

type MixedNestedArray = (number | string)[][][][];
type DeepMixed = DeepArrayElement<MixedNestedArray>; // type DeepMixed = string | number

type RegularNumber = DeepArrayElement<number>; // type RegularNumber = number
            

              
                Copy
              
            
          

Denne rekursive tilnærmingen lar deg trekke ut typen elementet på det dypeste nestingsnivået i en matrise.

Virkelige applikasjoner

Nøkkelordet infer finner applikasjoner i forskjellige scenarier der dynamisk typemanipulering er nødvendig. Her er noen praktiske eksempler:

1. Opprette en typesikker hendelsesemitter

Du kan bruke infer til å lage en typesikker hendelsesemitter som sikrer at hendelseshåndterere mottar riktig datatype.

            type EventMap = {
  'data': { value: string };
  'error': { message: string };
};

type EventName<T extends EventMap> = keyof T;

type EventData<T extends EventMap, K extends EventName<T>> = T[K];

type EventHandler<T extends EventMap, K extends EventName<T>> = (data: EventData<T, K>) => void;

class EventEmitter<T extends EventMap> {
  private listeners: { [K in EventName<T>]?: EventHandler<T, K>[] } = {};

  on<K extends EventName<T>>(event: K, handler: EventHandler<T, K>): void {
    if (!this.listeners[event]) {
      this.listeners[event] = [];
    }
    this.listeners[event]!.push(handler);
  }

  emit<K extends EventName<T>>(event: K, data: EventData<T, K>): void {
    this.listeners[event]?.forEach(handler => handler(data));
  }
}


const emitter = new EventEmitter<EventMap>();

emitter.on('data', (data) => {
  console.log(`Received data: ${data.value}`);
});

emitter.on('error', (error) => {
  console.error(`An error occurred: ${error.message}`);
});

emitter.emit('data', { value: 'Hello, world!' });

emitter.emit('error', { message: 'Something went wrong.' });

            

              
                Copy
              
            
          

I dette eksemplet bruker EventData betingede typer og infer for å trekke ut datatypen som er knyttet til et spesifikt hendelsesnavn, og sikrer at hendelseshåndterere mottar riktig datatype.

2. Implementere en typesikker reducer

Du kan utnytte infer for å lage en typesikker reducer-funksjon for tilstandsstyring.

            type Action<T extends string, P = undefined> = P extends undefined
  ? { type: T }
  : { type: T; payload: P };

type Reducer<S, A extends Action<string>> = (state: S, action: A) => S;

// Example Actions
type IncrementAction = Action<'INCREMENT'>;
type DecrementAction = Action<'DECREMENT'>;
type SetValueAction = Action<'SET_VALUE', number>;


// Example State
interface CounterState {
  value: number;
}

// Example Reducer
const counterReducer: Reducer<CounterState, IncrementAction | DecrementAction | SetValueAction> = (
  state: CounterState,
  action: IncrementAction | DecrementAction | SetValueAction
): CounterState => {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, value: state.value + 1 };
    case 'DECREMENT':
      return { ...state, value: state.value - 1 };
    case 'SET_VALUE':
      return { ...state, value: action.payload };
    default:
      return state;
  }
};

// Usage
const initialState: CounterState = { value: 0 };
const newState1 = counterReducer(initialState, { type: 'INCREMENT' }); // newState1.value is 1
const newState2 = counterReducer(newState1, { type: 'SET_VALUE', payload: 10 }); // newState2.value is 10

            

              
                Copy
              
            
          

Selv om dette eksemplet ikke bruker `infer` direkte, legger det grunnlaget for mer komplekse reducer-scenarier. `infer` kan brukes til å dynamisk trekke ut `payload`-typen fra forskjellige `Action`-typer, noe som gir mulighet for strengere typesjekking i reducer-funksjonen. Dette er spesielt nyttig i større applikasjoner med mange handlinger og komplekse tilstandsstrukturer.

3. Dynamisk typegenerering fra API-responser

Når du arbeider med APIer, kan du bruke infer til automatisk å generere TypeScript-typer fra strukturen til API-responsene. Dette bidrar til å sikre typesikkerhet når du samhandler med eksterne datakilder.

Vurder et forenklet scenario der du vil trekke ut datatypen fra en generisk API-respons:

            type ApiResponse<T> = {
  status: number;
  data: T;
  message?: string;
};

type ExtractDataType<T> = T extends ApiResponse<infer U> ? U : never;

// Example API Response
type User = {
  id: number;
  name: string;
  email: string;
};

type UserApiResponse = ApiResponse<User>;

type ExtractedUser = ExtractDataType<UserApiResponse>; // type ExtractedUser = User

            

              
                Copy
              
            
          

ExtractDataType bruker infer til å trekke ut typen U fra ApiResponse<U>, og gir en typesikker måte å få tilgang til datastrukturen som returneres av APIet.

Beste praksis og vurderinger

• Klarhet og lesbarhet: Bruk beskrivende typevariabelnavn (f.eks. ReturnType i stedet for bare R) for å forbedre kodelesbarheten.
• Ytelse: Selv om infer er kraftig, kan overdreven bruk påvirke typekontrollens ytelse. Bruk det med omhu, spesielt i store kodebaser.
• Feilhåndtering: Gi alltid en fallback-type (f.eks. any eller never) i false-grenen av en betinget type for å håndtere tilfeller der typen ikke samsvarer med det forventede mønsteret.
• Kompleksitet: Unngå overdrevent komplekse betingede typer med nestede infer-setninger, da de kan bli vanskelige å forstå og vedlikeholde. Refaktor koden din til mindre, mer håndterbare typer når det er nødvendig.
• Testing: Test de betingede typene dine grundig med forskjellige inndatatyper for å sikre at de oppfører seg som forventet.

Globale vurderinger

Når du bruker TypeScript og infer i en global sammenheng, bør du vurdere følgende:

• Lokalisering og internasjonalisering (i18n): Typer må kanskje tilpasses forskjellige lokaliseringer og dataformater. Bruk betingede typer og `infer` for å dynamisk håndtere varierende datastrukturer basert på lokaliseringsspesifikke krav. For eksempel kan datoer og valutaer representeres forskjellig på tvers av land.
• API-design for globale målgrupper: Design APIene dine med global tilgjengelighet i tankene. Bruk konsistente datastrukturer og formater som er enkle å forstå og behandle uavhengig av brukerens plassering. Type definisjoner bør gjenspeile denne konsistensen.
• Tidssoner: Når du arbeider med datoer og klokkeslett, må du være oppmerksom på tidssoneforskjeller. Bruk passende biblioteker (f.eks. Luxon, date-fns) for å håndtere tidssonekonverteringer og sikre nøyaktig datarepresentasjon på tvers av forskjellige regioner. Vurder å representere datoer og klokkeslett i UTC-format i API-responsene dine.
• Kulturelle forskjeller: Vær oppmerksom på kulturelle forskjeller i datarepresentasjon og tolkning. For eksempel kan navn, adresser og telefonnumre ha forskjellige formater i forskjellige land. Forsikre deg om at type definisjonene dine kan imøtekomme disse variasjonene.
• Valutahåndtering: Når du arbeider med pengeverdier, bruk en konsistent valutarepresentasjon (f.eks. ISO 4217 valutakoder) og håndter valutakonverteringer på riktig måte. Bruk biblioteker designet for valutamanipulasjon for å unngå presisjonsproblemer og sikre nøyaktige beregninger.

Tenk for eksempel på et scenario der du henter brukerprofiler fra forskjellige regioner, og adresseformatet varierer avhengig av land. Du kan bruke betingede typer og `infer` for å dynamisk justere type definisjonen basert på brukerens plassering:

            type AddressFormat<CountryCode extends string> = CountryCode extends 'US'
    ? { street: string; city: string; state: string; zipCode: string; }
    : CountryCode extends 'CA'
    ? { street: string; city: string; province: string; postalCode: string; }
    : { addressLines: string[]; city: string; country: string; };

type UserProfile<CountryCode extends string> = {
    id: number;
    name: string;
    email: string;
    address: AddressFormat<CountryCode>;
    countryCode: CountryCode; // Add country code to profile
};

// Example Usage
type USUserProfile = UserProfile<'US'>; // Has US address format
type CAUserProfile = UserProfile<'CA'>; // Has Canadian address format
type GenericUserProfile = UserProfile<'DE'>; // Has Generic (international) address format

            

              
                Copy
              
            
          

Ved å inkludere `countryCode` i `UserProfile`-typen og bruke betingede typer basert på denne koden, kan du dynamisk justere `address`-typen slik at den samsvarer med det forventede formatet for hver region. Dette gir mulighet for typesikker håndtering av forskjellige dataformater på tvers av forskjellige land.

Konklusjon

Nøkkelordet infer er et kraftig tillegg til TypeScripts typesystem, som muliggjør sofistikert typemanipulering og ekstraksjon innenfor betingede typer. Ved å mestre infer kan du lage mer robust, typesikker og vedlikeholdbar kode. Fra å utlede funksjonsreturtyper til å trekke ut egenskaper fra komplekse objekter, er mulighetene store. Husk å bruke infer med omhu, og prioriter klarhet og lesbarhet for å sikre at koden din forblir forståelig og vedlikeholdbar i det lange løp.

Denne guiden har gitt en omfattende oversikt over infer og dens bruksområder. Eksperimenter med eksemplene som er gitt, utforsk flere brukstilfeller og utnytt infer for å forbedre TypeScript-utviklingsarbeidsflyten din.